<template>
  <div>
    <div class="ChangePassword_die">
      <div></div>
      <div>
        <div>
          <img src="http://www.zhaoshengku.net/wx-password.png" alt />
          <input type="password" placeholder="请输入原密码" v-model.lazy="nodepass" placeholder-class="placeholder" />
          <span v-if="oldisshow">密码错误</span>
        </div>
        <div>
          <img
            src="http://www.zhaoshengku.net/wx-%E9%94%AE%E7%9B%98%20%E6%8B%B7%E8%B4%9D%204.png"
            alt
          />
          <input type="password" placeholder="请输入新密码" v-model.lazy="newpass" @blur="newpassClick"  placeholder-class="placeholder"/>
          <span v-if="newisshow">密码由字母和数字组成且在8到16位之间</span>
        </div>
        <div>
          <img
            src="http://www.zhaoshengku.net/wx-%E9%94%AE%E7%9B%98%20%E6%8B%B7%E8%B4%9D%204.png"
            alt
          />
          <input
            type="password"
            placeholder="请再次输入新密码"
            v-model.lazy="newpasstwo"
            @blur="newtwoClick"
            placeholder-class="placeholder"
          />
          <span v-if="newpassisshow">两次密码输入不一致</span>
        </div>
      </div>
      <div @click="changePass">确认修改</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nodepass: "",
      newpass: "",
      newpasstwo: "",
      headerCode: "",
      oldisshow: false,
      newisshow: false,
      newpassisshow: false
    };
  },
  methods: {
    // 提交
    changePass() {
      if (!this.newisshow && !this.newpassisshow) {
        wx.request({
          url: "https://api.zhaoshengku.net/index/member/changepwd",
          method: "post",
          data: {
            user: this.$store.state.info_phone,
            member_id: this.$store.state.info_member_id,
            oldpwd: this.nodepass,
            newpwd: this.newpasstwo
          },
          header: {
            Authorization: this.headerCode
          },
          success: res => {
            if (res.data.code == 200) {
              wx.showToast({
                title: "密码修改成功,请重新登录",
                icon: "true",
                duration: 1000,
                mask: true
              });
              wx.setStorage({
                key: "koken",
                data: "0"
              });
              setTimeout(function() {
                wx.switchTab({
                  url: "/pages/my/main"
                });
              }, 1000);
              this.nodepass = "";
              this.newpasstwo = "";
              this.newpass = "";
            } else if (res.data.code == 50001) {
              wx.showToast({
                title: "旧密码错误",
                icon: "none",
                duration: 1000,
                mask: true
              });
            }
          },
          fail: res => {
            console.log(res);
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
      }
    },
    // 正则验证密码格式
    newpassClick() {
      var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      if (!reg.test(this.newpass)) {
        this.newisshow = true;
      } else {
        this.newisshow = false;
      }
    },
    // 验证密码是否与第一次输入的一致
    newtwoClick() {
      if (this.newpass == this.newpasstwo) {
        this.newpassisshow = false;
      } else {
        this.newpassisshow = true;
      }
    }
  },
  onUnload() {
    this.nodepass = "";
    this.newpasstwo = "";
    this.newpass = "";
  },
  onPullDownRefresh() {
    wx.stopPullDownRefresh();
  },
  mounted() {
    this.oldisshow = false;
    (this.newisshow = false), (this.newpassisshow = false);
    wx.setNavigationBarTitle({
      title: "密码修改"
    });
    // 设置头

    // 获取token
    wx.getStorage({
      key: "koken",
      success: res => {
        this.headerCode = "Bearer " + res.data;
      }
    });
  }
};
</script>

<style scoped>
.ChangePassword_die > div:nth-child(1) {
  width: 100%;
  height: 10rpx;
  background: #dddddd;
}
.ChangePassword_die > div:nth-child(2) {
  padding: 0 32rpx;
}
.ChangePassword_die > div:nth-child(2) > div {
  display: flex;
  height: 130rpx;
  line-height: 130rpx;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 4rpx dashed #dddddd;
  padding-top: 30rpx;
  position: relative;
}
.ChangePassword_die > div:nth-child(2) > div > img {
  width: 42rpx;
  height: 42rpx;
  margin-right: 27rpx;
}
.ChangePassword_die > div:nth-child(2) > div > input {
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.ChangePassword_die > div:nth-child(2) > div > span {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(255, 0, 0, 1);
  line-height: 52px;
  position: absolute;
  right: 5rpx;
  top: 100rpx;
}
.ChangePassword_die > div:nth-child(3) {
  font-size: 34rpx;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  width: 686rpx;
  height: 98rpx;
  line-height: 98rpx;
  text-align: center;
  margin: 0 auto;
  background: url("http://www.zhaoshengku.net/wx-yuanjiao%20.png") center center
    no-repeat;
  background-size: 100% 100%;
  margin-top: 600rpx;
}
.placeholder{
  color:#999;
}
input{
  color:#333;
}
</style>
